<template>
  <div
    v-loading="loading"
    element-loading-text="拼命加载中"
    element-loading-spinner="el-icon-loading"
    style="width:100%;height:100%"
  >
    <my-scroll ref="myscroll" :distance="distance" :opacity="0.1">
      <div class="home">
        <div class="box" id="box">
          <article-item
            class="articleitem"
            v-for="(item, index) in data"
            :key="index"
            :article="item"
            @click.native="handlerarticle(item._id)"
          ></article-item>
          <div class="page">
            <!-- <el-button type="primary" icon="el-icon-search" >搜索</el-button>
          <el-button type="primary" icon="el-icon-search" >搜索</el-button>-->
            <div class="pagebox">
              <el-pagination
                background
                layout="total ,prev, pager, next ,jumper"
                @current-change="handleCurrentChange"
                :page-size="pageSize"
                :total="total"
                :current-page="currentPage"
              ></el-pagination>
            </div>
            <div class="more" @click="more">
              查看更多
            </div>
          </div>
        </div>
      </div>
    </my-scroll>
  </div>
</template>
<script>
import ArticleItem from "./ArticleItem"
import request from "../../../api/request"
export default {
  name: "home",
  data() {
    return {
      loading: true,
      value: 1,
      total: null, //文章总数
      pageSize: 6, //每页的数据量
      currentPage: 1, //当前页码数
      data: [], //文章数据
      distance: 0, //接收Article页面传递过来的vuescroll滚动的距离
      page: 1, //接收Article页面传递过来的页码
    }
  },
  created() {
    let sort = window.localStorage.getItem("sort")
    if (sort) {
      this.value = sort
    }
    if (this.$route.query.page) {
      const { page, distance } = this.$route.query
      this.currentPage = +page
      this.distance = +distance
    }
    this.getData(this.currentPage)
  },
  beforeDestroy() {},
  components: {
    ArticleItem,
  },
  mounted() {
    this.$EventBus.$on("sort", (value) => {
      this.value = value
      this.currentPage = 1
      this.getData(this.currentPage)
    })
  },
  methods: {
    // 页码改变时
    handleCurrentChange(val) {
      this.currentPage = val
      this.distance = 0
      this.getData(this.currentPage)
      // 翻页时重置vuescroll
      this.$refs["myscroll"].$refs["vs"].scrollTo({
        y: "0%",
      })
    },
    // pc端根据页码加载数据
    async getData(page) {
      const { count, data } = await request({
        url: "/article/obtain",
        data: {
          page,
          limit: this.pageSize,
          sort: this.value,
        },
        method: "get",
      })
      this.data = []
      this.total = Object.freeze(count)
      this.data = data
      this.loading = false
    },
    // 移动端加载更多
    async more() {
      this.page++
      const { count, data } = await request({
        url: "/article/obtain",
        data: {
          page: this.page,
          limit: this.pageSize,
          sort: this.value,
        },
        method: "get",
      })
      this.total = Object.freeze(count)
      this.data.push(...data)
      this.loading = false
    },
    handlerarticle(id) {
      // 获取vuescroll滚动的距离
      const { scrollTop, scrollLeft } = this.$refs["myscroll"].$refs[
        "vs"
      ].getPosition()
      this.$router.push({
        name: "article",
        query: { id, distance: scrollTop, page: this.currentPage },
      })
    },
  },
}
</script>
<style lang="scss" scoped>
@import "../../../scss/common.scss";
@media (min-width: 600px) {
  .home {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    background: #efefef;
  }
  .box {
    width: 100%;
    max-width: 1100px;
    box-sizing: border-box;
    height: 100%;
    margin: 0px 20px;
    text-align: center;
  }
  .box:after {
    content: "";
    width: 300px;
    border: 1px solid transparent;
  }
  .articleitem {
    margin-top: 20px;
    transition: 1s;
  }
  .articleitem:hover {
    cursor: pointer;
    box-shadow: 0 10px 8px rgba(10, 16, 20, 0.24),
      0 0 8px rgba(10, 16, 20, 0.12);
  }
  .page {
    width: 100%;
    display: flex;
    justify-content: center;
    margin: 20px 0px;
    .pagebox {
      width: auto;
      padding: 10px 20px;
      background: white;
      max-width: 950px !important;
      display: flex;
      justify-content: center;
      box-shadow: 0 0px 8px rgba(10, 16, 20, 0.24),
        0 0 8px rgba(10, 16, 20, 0.12);
      border-radius: 5px;
    }
    .more {
      display: none;
    }
  }
}
@media (max-width: 600px) {
  .home {
    width: 100%;
    height: 100%;
    display: flex;
    overflow: hidden;
    justify-content: center;
  }
  .box {
    width: 100%;
    text-align: center;
  }
  .box:after {
    display: none;
  }
  .box .articleitem:not(:first-child) {
    border-top: 0.3125rem solid rgb(226, 224, 224);
  }
  .page {
    padding-top: 0.625rem;
    background: rgb(243, 241, 241);
    .pagebox {
      display: none;
    }
    .more {
      display: block;
      line-height: 1rem;
      padding-bottom: 0.9rem;
      color: rgba(168, 168, 168, 0.8);
    }
  }
}
/deep/ .el-pagination.is-background .el-pager li:not(.disabled).active {
  background-color: $ar_color;
}
/deep/ .el-pagination.is-background .el-pager li:not(.active):hover {
  color: $ar_color;
}
/deep/ .el-loading-spinner i {
  color: $ar_color !important;
}
/deep/ .el-loading-text {
  color: $ar_color !important;
}
</style>
